<!-- 弹出城市选择 -->
<template>
  <div class="container_box">
    <div class="close_btn el-icon-close changeHanld" @click="closewin"></div>
    <div class="select_box">
      <div class="hotCity">
        <span>热门城市：</span>
        <p
          @click="ClickKeyWord(item)"
          v-for="(item, index) in hotCity"
          :key="index"
          class="changeHanld"
        >{{ item.name }}</p>
      </div>
      <span></span>
      <div class="input_bar">
        <div class="input_content">
          <input type="text" placeholder="搜索城市" @input="changeInput" v-model="keyWord" />
          <span class="el-icon-search changeHanld" @click="changeInput"></span>
        </div>
        <div class="input_box" v-show="fliteCity.length > 0">
          <ul>
            <li
              class="changeHanld"
              v-for="(item, index) in fliteCity"
              :key="index"
              @click="clickSpell(item.name,item.entranceUrl)"
            >{{ item.name }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="tabList">
      <p
        v-for="(item, index) in tapList"
        :key="index"
        @click="toggle(index)"
        class="changeHanld"
        :class="currentSelect == index ? 'active' : ''"
      >{{ item }}</p>
    </div>
    <div class="select_list" v-show="currentSelect == 0">
      <ul>
        <li
          v-for="(item, index) in provinceFilter"
          :key="index"
          :class="item.values.length > 1 ? 'bg' : ''"
        >
          <p :class="item.values.length > 1 ? 'bg' : ''">{{ item.initialsAlphabetic }}</p>
          <div class="cityList_item">
            <div
              class="cityList"
              :class="item.values.length > 1 ? 'bg' : ''"
              v-for="(v, i) in item.values"
              :key="i"
            >
              <div class="province_item">{{ v.name }}</div>
              <div class="city_item">
                <span
                  class="changeHanld"
                  v-for="(j, q) in v.child"
                  :key="q"
                  @click="hanldClick(v, j.name,j.entranceUrl)"
                >{{ j.name }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="spell_select" v-show="currentSelect == 1">
      <ul>
        <li v-for="(item, index) in spellFilter" :key="index">
          <p>{{ item.initialsAlphabetic }}</p>
          <div class="cityList">
            <span
              class="changeHanld"
              @click="clickSpell(v.name,v.entranceUrl)"
              v-for="(v, i) in item.values"
              :key="i"
            >{{ v.name }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { sessionDeposit } from "../../util/validate.js";
import { commonRequest, postRequest, cacheAreaInfo } from "../../api/api.js";
import { mapActions, mapMutations } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      defalut: false
    }
  },
  components: {},
  data() {
    //这里存放数据
    return {
      provinceFilter: [], // 省份选择数据
      spellFilter: [], // 按拼音
      tapList: ["按省份选择", "按拼音首字母选择"],
      selectHot: false,
      currentSelect: 0, // 当前选择
      hotCity: [], // 热门城市
      keyWord: "", // 搜索框的值
      fliteCity: "" // 搜索框中的匹配数据
    };
  },
  mounted() {
    this.toggle(0); // 获取城市名
    this.getHotCity(); // 获取热门城市
  },
  methods: {
    ...mapMutations(["setHome"]),
    // 点击关键字
    ClickKeyWord(item) {
      if (item.name == "全国") {
        sessionDeposit("cityName", item.name); // 城市名称
        sessionDeposit("provinceName", ""); // 省份名

        this.closewin();
        location.reload(); // 刷新窗口
      } else {
        this.clickSpell(item.name, item.entranceUrl);
      }
    },
    // 关闭定位窗口
    closewin() {
      this.$emit("isVisible", false);
    },
    // 点击切换选择
    toggle(index) {
      this.currentSelect = index;
      if (index == 0) {
        commonRequest(
          "/api/pms/pmsPolicyNotice/getPolicyNoticeAreaInfo"
        ).then(res => {
          this.provinceFilter = res;
        });
      } else if (index == 1) {
        commonRequest(
          "/api/pms/pmsPolicyNotice/getPolicyNoticeCityAll"
        ).then(res => {
          // console.log(res);
          this.spellFilter = res;
        });
      }
    },
    // 点击城市选择列表
    hanldClick(item, val, url) {
      if (url) {
        window.open(url);
      } else {
        this.$emit("cityItem", {
          cityName: val
        });

        sessionDeposit("cityName", val); // 城市名称
        sessionDeposit("provinceName", item.name); // 省份名
        // location.reload();
        // cacheAreaInfo({province:val,city:item.name})
        this.setHome(true);
        this.closewin();
      }
    },
    //点击拼音排列(获取城市数据)
    clickSpell(val, url) {
      if (url) {
        window.open(url);
      } else {
        let arr = [];
        this.provinceFilter.forEach(el => {
          arr.push(...el.values);
        });
        let a = -1;
        arr.forEach((el, index) => {
          let i = el.child.findIndex(e => e.name == val);
          if (i > -1) a = index;
        });
        this.hanldClick(
          {
            name: arr[a].name
          },
          val
        );
      }
    },
    // 获取热门城市
    getHotCity() {
      commonRequest(
        "/api/pms/pmsPolicyNotice/getPolicyNoticePopularSearches"
      ).then(res => {
        // console.log(res);
        this.hotCity = [
          {
            name: "全国",
            entranceUrl: ""
          }
        ];
        this.hotCity.push(...res);
      });
    },
    // 监听input框的值,获取数据
    changeInput() {
      if (this.keyWord != "") {
        // 当input不为空时(获取数据)
        commonRequest(
          "/api/pms/pmsPolicyNotice/getPolicyNoticeCityAll",
          {
            city: this.keyWord
          }
        ).then(res => {
          let arr = [];
          res.forEach(el => {
            arr.push(el.values);
          });
          let arr1 = [...arr];
          this.fliteCity = arr.flatMap(item => {
            return item;
          });
        });
      } else {
        // 当input不为空时(获取数据)
        this.fliteCity = [];
      }
    }
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.container_box {
  width: 857px;
  height: 500px;
  overflow-y: auto;
  position: absolute;
  left: 116px;
  top: 60px;
  background: #f4f6fc;
  /* 滚动条样式 */

  &::-webkit-scrollbar {
    width: 8px;
    background-color: #e7eaf0;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #e1e1e2;
  }

  &::-webkit-scrollbar-track {
    background-color: #fff;
  }

  &::-webkit-scrollbar-button {
    background-color: red;
    display: none;
  }

  /* 关闭按钮 */

  .close_btn {
    // color: #fff;
    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 10px;
    color: #545454;
  }

  .select_box {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 0 38px;
    padding-right: 10px;
    color: #545454;
    justify-content: space-between;

    .input_bar {
      height: 60px;
      display: flex;
      align-items: center;
      margin-left: 10px;
      width: 210px;
      position: relative;

      .input_box {
        position: absolute;
        left: 0;
        top: 47px;
        width: 210px;
        max-height: 300px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.2);
        overflow: auto;
        z-index: 100;

        li {
          padding-left: 10px;
          height: 30px;
          line-height: 30px;

          &:hover {
            color: #44a2ff;
          }
        }
      }

      .input_content {
        width: 100%;
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 0 10px;

        // border: 1px solid #44a2ff;
        input {
          width: 170px;
          height: 30px;
          border-radius: 4px 0 0 4px;
          // padding-left: 10px;
        }

        button {
          border-radius: 0px 4px 4px 0px;
          height: 30px;
          background-color: #44a2ff;
          color: #fff;
        }
      }
    }

    .hotCity {
      display: flex;
      font-size: 14px;
      // margin-left: 50px;
      padding: 2px 0px;
      border-radius: 4px;

      span {
        font-weight: 700;
        line-height: 31px;
      }

      p {
        padding: 6px 10px;

        &:hover {
          color: #fff;
          border-radius: 4px;
          background-color: #44a2ff;
        }
      }
    }
  }

  .tabList {
    margin-top: 20px;
    padding: 0 15px;
    display: flex;
    // height: 40px;
    color: #545454;

    // border: 1px solid #545454;
    // align-items: center;
    p {
      // margin-right: 20px;
      padding: 4px 24px;
      line-height: 30px;
      font-size: 14px;

      &.active {
        // border: #545454 1px solid;
        // border-bottom: none;
        background-color: #fff;
        color: #44a2ff;
      }
    }
  }

  .select_list {
    ul {
      li {
        color: #545454;
        display: flex;
        // align-items: center;
        // flex-wrap: wrap;
        font-size: 14px;
        padding: 10px 0 10px 24px;

        // padding-right: 0px;
        // border-bottom: 1px solid #ccc;
        &:nth-child(even) {
          background-color: rgba(204, 204, 204, 0.1);
        }

        &:nth-child(odd) {
          background-color: rgba(255, 255, 255, 1);
        }

        &.bg {
          padding-top: 0;
          padding-bottom: 0;
        }

        p {
          margin: 0px 15px;
          // text-align: center;
          // height: 100%;
          height: 30px;
          line-height: 30px;

          &.bg {
            padding-top: 10px;
          }
        }

        .cityList_item {
          flex: 1;
        }

        .cityList {
          display: flex;

          // flex-wrap: wrap;
          // flex-direction: column;
          &.bg {
            margin-left: -88px;
            // padding-left: 88px;
            padding: 10px 0 10px 88px;

            // height: 35px;
            &:nth-child(even) {
              background: rgba(255, 255, 255, 1);
            }

            &:nth-child(odd) {
              background: rgba(240, 242, 247, 1);
            }
          }

          .province_item {
            font-weight: 700;
            padding: 3px 10px;
            // margin-right: 15px;
            line-height: 25px;
          }

          .city_item {
            display: flex;
            flex-wrap: wrap;
            flex: 1;

            // margin-right: 15px;
            span {
              padding: 6px 10px;

              &:hover {
                border-radius: 4px;
                background: #44a2ff;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }

  .spell_select {
    ul {
      li {
        padding: 10px 5px 10px 25px;
        display: flex;
        color: #545454;

        &:nth-child(even) {
          background-color: rgba(204, 204, 204, 0.1);
        }

        &:nth-child(odd) {
          background-color: rgba(255, 255, 255, 1);
        }

        p {
          margin: 5px 15px 0;
        }

        .cityList {
          display: flex;
          flex: 1;
          flex-wrap: wrap;

          span {
            padding: 6px 10px;

            &:hover {
              border-radius: 4px;
              background: #44a2ff;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
